<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/layui.css"/>
</head>
<body>

<!------------------------------- 识别窗口开始 -------------------------------->
<div style="padding: 1em 5em 1em 5em;">

    <fieldset style="padding: 1em;">
        <legend>识别窗口</legend>


        <div class="layui-form-item">
            <label class="layui-form-label">选择图片</label>
            <div class="layui-input-block">
                <button type="button" class="layui-btn" id="tesseract_photo">
                    <i class="layui-icon">&#xe67c;</i>上传图片
                </button>

                <div class="layui-upload-list">
                    <img class="layui-upload-img" id="tesseract_demo">
                </div>

            </div>
        </div>

        <input type="text" hidden id="upload_image_name">

        <div class="layui-form-item">
            <label class="layui-form-label">识别结果</label>
            <div class="layui-input-block">
                <!--<input type="text" class="layui-input" id="tesseract_result" placeholder="上传图片后，这里将显示识别结果...">-->
                <textarea class="layui-textarea" id="tesseract_result"></textarea>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">正确结果</label>
            <div class="layui-input-block">
                <textarea class="layui-textarea" id="tesseract_result_true"></textarea>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">识别情况</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input" id="tesseract_result_description">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">操作</label>
            <div class="layui-input-block">
                <button class="layui-btn" onclick="startTrain2()">开始训练</button>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">生成结果</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input" id="tesseract_train_result" placeholder="生成的结果...">
            </div>
        </div>

    </fieldset>

</div>
<!------------------------------- 识别窗口结束 -------------------------------->

<!------------------------------- 训练窗口2开始 -------------------------------->
<div style="padding: 0 5em 1em 5em;">

    <fieldset style="padding: 1em;">
        <legend>切割图片训练窗口</legend>

        <div class="layui-form-item">
            <label class="layui-form-label">选择图片</label>
            <div class="layui-input-block">
                <div class="layui-upload">
                    <button type="button" class="layui-btn layui-btn-normal" id="testList">选择多文件</button>
                    <div class="layui-upload-list">
                        <table class="layui-table">
                            <thead>
                            <tr>
                                <th>文件名</th>
                                <th>大小</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody id="demoList"></tbody>
                        </table>
                    </div>
                    <button type="button" class="layui-btn" id="testListAction">开始上传</button>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">操作</label>
            <div class="layui-input-block">
                <button class="layui-btn" onclick="startTrain()">开始训练</button>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">生成结果</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input" id="train_result" placeholder="生成的结果...">
            </div>
        </div>

    </fieldset>
</div>
<!------------------------------- 训练窗口2结束 -------------------------------->

<script src="./layui.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
    const API_URL = "http://localhost:8080/"

    // 开始训练
    function startTrain () {
        $.get(API_URL + 'train/start', function (resp) {
            if (resp.code == 200) {
                // 将成功训练的字体显示出来
                $('#train_result').val(resp.value)
            }
        }, 'json')
    }

    // 开始训练2
    function startTrain2 () {
        $.get(API_URL + 'train2/start?fileName=' + $('#upload_image_name').val() + '&result=' + $('#tesseract_result_true').val(), function (resp) {
            if (resp.code == 200) {
                // 将成功训练的字体显示出来
                $('#tesseract_train_result').val(resp.value)
            }
        }, 'json')
    }

    // 去除所有空格
    function Trim (str) {
        var result;
        result = str.replace(/(^\s+)|(\s+$)/g, "");
        result = result.replace(/\s/g, "");
        return result;
    }

    // 正确结果输入监听
    $("#tesseract_result_true").bind("input propertychange change", function (event) {
        // 将去除空格后的正确结果显示出来
        $('#tesseract_result_true').val(Trim(event.target.value))
        // 将去除空格后的识别结果显示出来
        $('#tesseract_result').val(Trim($('#tesseract_result').val()))

        if (Trim(event.target.value) == $('#tesseract_result').val()) {
            $('#tesseract_result_description').val('正确识别')
        } else {
            $('#tesseract_result_description').val('识别错误')
        }
    });

    layui.use(['upload', 'jquery'], function () {
        var upload = layui.upload, $ = layui.jquery;

        // 待识别图片上传
        var tesseractUpload = upload.render({
            elem: '#tesseract_photo',
            url: API_URL + 'tesseract',
            accept: 'file',
            before: function (obj) {
                obj.preview(function (index, file, result) {
                    $('#tesseract_demo').attr('src', result);
                });
            },
            done: function (res) {
                // 打印结果
                if (res.value.result === "") {
                    $('#tesseract_result').val('识别不出数值')
                } else {
                    $('#tesseract_result').val(res.value.result)
                }

                $('#upload_image_name').val(res.value.fileName)
            },
            error: function () {
                //请求异常回调
            }
        });

        // 待训练图片上传
        var trainUpload = upload.render({
            elem: '#train_photo',
            url: API_URL + 'train',
            accept: 'file',
            multiple: true,
            before: function (obj) {
                // 预读本地文件示例
                obj.preview(function (index, file, result) {
                    $('#train_demo').append('&emsp;新增&emsp;' + file.name + '&emsp;')
                })
            },
            done: function (resp) {
                // 上传完成
            },
            error: function () {

            }
        });

        //多文件列表示例
        var demoListView = $('#demoList'), uploadListIns = upload.render({
            elem: '#testList',
            url: API_URL + 'train',
            accept: 'file',
            multiple: true,
            auto: false,
            bindAction: '#testListAction',
            choose: function (obj) {
                var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                //读取本地文件
                obj.preview(function (index, file, result) {
                    var tr = $(['<tr id="upload-' + index + '">'
                        , '<td>' + file.name + '</td>'
                        , '<td>' + (file.size / 1014).toFixed(1) + 'kb</td>'
                        , '<td>等待上传</td>'
                        , '<td>'
                        , '<button class="layui-btn layui-btn-mini demo-reload layui-hide">重传</button>'
                        , '<button class="layui-btn layui-btn-mini layui-btn-danger demo-delete">删除</button>'
                        , '</td>'
                        , '</tr>'].join(''));

                    //单个重传
                    tr.find('.demo-reload').on('click', function () {
                        obj.upload(index, file);
                    });

                    //删除
                    tr.find('.demo-delete').on('click', function () {
                        delete files[index]; //删除对应的文件
                        tr.remove();
                        uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                    });

                    demoListView.append(tr);
                });
            },
            done: function (res, index, upload) {
                if (res.code == 200) { //上传成功
                    var tr = demoListView.find('tr#upload-' + index)
                        , tds = tr.children();
                    tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
                    tds.eq(3).html(''); //清空操作
                    return delete this.files[index]; //删除文件队列已经上传成功的文件

                }
                this.error(index, upload);
            },
            error: function (index, upload) {
                var tr = demoListView.find('tr#upload-' + index)
                    , tds = tr.children();
                tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
                tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
            }
        });
    });
</script>
</body>
</html>